import React from 'react';
import Axios from 'axios';
import Input from 'shared/input';
import { apiPrefix } from 'shared/api';
import AlertModule from 'shared/AlertModule';
import './index.less';


class PayStructureFrom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      payStructure: {},
      visible: false,
      change: false,
      error1: false,
      error2: false,
      error3: false,
      error4: false,
      error5: false,
    };
  }
  componentDidMount() {
    if (this.props.match.params.id !== undefined) {
      const api = `${apiPrefix}wdy_wage/api/v1//wage/salary?id=${this.props.match.params.id}`;
      Axios.get(api)
        .then((response) => {
          console.log(response);
          this.setState({ payStructure: response.data.data });
        });
    }
  }
  handleOnchange=(value, key) => {
    const { payStructure } = this.state;
    payStructure[key] = value;
    this.setState({ payStructure: { ...this.state.payStructure }, change: true });
  }
  redirectToPayStructure() {
    this.props.history.push('/AttendanceAndWage/PayStructure');
  }
  showAlertModule=() => {
    if (this.state.change === true) {
      this.setState({ visible: true });
    } else {
      this.redirectToPayStructure();
    }
  }
    closeAlertModule=() => {
      this.setState({ visible: false });
    }
    historyPush=() => {
      this.redirectToPayStructure();
      this.setState({ visible: false });
    }
  sureAdd=() => {
    const { payStructure } = this.state;
    if (payStructure.name === '' || payStructure.name === undefined) {
      this.setState({ error1: true });
    } else {
      this.setState({ error1: false });
    }
    if (payStructure.subsidy_out === '' || payStructure.subsidy_out === undefined) {
      this.setState({ error2: true });
    } else {
      this.setState({ error2: false });
    }
    if (payStructure.job_salary === '' || payStructure.job_salary === undefined) {
      this.setState({ error3: true });
    } else {
      this.setState({ error3: false });
    }
    if (payStructure.bonus === '' || payStructure.bonus === undefined) {
      this.setState({ error4: true });
    } else {
      this.setState({ error4: false });
    }
    if (payStructure.subsidy === '' || payStructure.subsidy === undefined) {
      this.setState({ error5: true });
    } else {
      this.setState({ error5: false });
    }
    const { error1, error2, error3, error4, error5 } = this.state;
    if (!error1 && !error2 && !error3 && !error4 && !error5) {
      if (this.props.match.params.id !== undefined) {
        const api = `${apiPrefix}wdy_wage/api/v1/wage/salary?id=${this.props.match.params.id}`;
        Axios.put(api, payStructure)
          .then(() => {
            this.redirectToPayStructure();
          });
      } else {
        const api = `${apiPrefix}wdy_wage/api/v1//wage/salary`;
        Axios.post(api, payStructure)
          .then(() => {
            this.redirectToPayStructure();
          });
      }
    }
  }
  render() {
    const id = this.props.match.params.id;
    const { payStructure, error1, error2, error3, error4, error5 } = this.state;
    return (
      <div className="content">
        <div>
          <h3>{id ? '编辑薪酬结构' : '添加薪酬结构'}</h3>
          <div className="pay-structure-from" >
            <Input
              inputKey="name"
              value={payStructure.name || ''}
              label="工资档位名称"
              error={error1}
              onChange={(val, key) => this.handleOnchange(val, key)}
            />
            <Input
              value={payStructure.subsidy_out || ''}
              type="number"
              inputKey="subsidy_out"
              label="补贴户外(防暑降温/烤火)"
              onChange={(val, key) => this.handleOnchange(val, key)}
              addonAfter="元"
              error={error2}
            />
            <Input
              type="number"
              inputKey="job_salary"
              value={payStructure.job_salary || ''}
              label="岗位工资"
              onChange={(val, key) => this.handleOnchange(val, key)}
              error={error3}
              addonAfter="元"
            />
            <Input
              value={payStructure.bonus || ''}
              type="number"
              inputKey="bonus"
              onChange={(val, key) => this.handleOnchange(val, key)}
              label="奖金"
              error={error4}
              addonAfter="元"
            />
            <Input
              type="number"
              inputKey="subsidy"
              value={payStructure.subsidy || ''}
              onChange={(val, key) => this.handleOnchange(val, key)}
              label="补贴"
              error={error5}
              addonAfter="元"
            />
            <Input
              inputKey="descr"
              value={payStructure.descr || ''}
              onChange={(val, key) => this.handleOnchange(val, key)}
              label="备注"
            />
            <div>
              <button className="sure-button" onClick={this.sureAdd}>确定</button>
              <button className="cancel-button" onClick={this.showAlertModule}>取消</button>
              <AlertModule visible={this.state.visible} onCancel={this.closeAlertModule} onOk={this.historyPush} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PayStructureFrom;
